<template>
  <div class="all">
    <div class="header">
      <!--    头部 标题-->
      <van-sticky :offset-top="0">
        <van-nav-bar
          title="评估量表结果"
        >
          <template #left>
            <div @click="onClickLeft" class="fanhui">
              <img src="../../assets/返回.png" alt="">
              <span class="sides">返回</span>
            </div>
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <div class="">
        <ul class="title">
          <li class=""><span>{{title}}</span></li>
        </ul>
        <div class="TabAll">
            <!-- 需要监听的内容 -->
          <v-touch v-on:swipeleft="leftChangeImg" v-on:swiperight="leftChangeImg">
            <template>
              <el-table
                :header-cell-style="{
                'background-color': '#1da4f2',
                'color': '#fff',
                'font-weight': '400'
          }"
                :row-class-name="tableRowClassName"
                ref="table"
                class="tab"
                :data="tableData"
                type="index"
                border
                width="100%"
                :max-height="Math.floor(height) - 20"
              >
                <el-table-column
                  v-for="(item, index) in tabTitle"
                  :key="index"
                  :prop="item.prop"
                  :fixed="item.fixed"
                  :label="item.name"
                  :class="[item.prop === 'chooseName0' ? 'li' : '']"
                  :width="[item.width !== undefined ? item.width : 100]">
                </el-table-column>
              </el-table>
            </template>
          </v-touch>
        </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import $ from 'jquery'
export default {
  name: 'PingGuList',
  data () {
    return {
      allList: [],
      listArr: [],
      result: '',
      title: '',
      INDEX: 0,
      btnList: [],
      ALL_POINTS: 0,
      tableData: [],
      tabTitle: [
        {
          name: '序号',
          prop: 'index',
          fixed: true,
          width: 50
        }, {
          name: '评估项',
          prop: 'zip',
          fixed: true,
          width: 100
        }, {
          name: '评估结果',
          prop: 'chooseName0',
          width: 140,
          fixed: false
        }, {
          name: '得分',
          prop: 'points0',
          width: 80,
          fixed: false
        }
      ],
      height: 0
    }
  },
  mounted () {
    this.height = $(window).height() - $('.TabAll').offset().top - 50
    $('.TabAll').css({'height': $(window).height() - $('.TabAll').offset().top - 50 + 'px', 'overflow': 'auto'})
    this.getList()
    //
  },
  methods: {
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    leftChangeImg () {
      // alert('左边')
    },
    // 返回上一页
    onClickLeft () {
      this.$router.history.go(-1)
    },
    getList () {
      this.$http.getMyAssessDetail({ID: this.$route.query.ID})
        .then(res => {
          console.log(res)
          this.allList = res.data.data
          var fzdatas = []
          this.title = this.allList[0].ASSESS_NAME
          this.ALL_POINTS = this.allList[0].ALL_POINTS
          this.result = this.allList[0].RESULT
          var zplist = this.allList[0].chooses
          // eslint-disable-next-line no-new-object
          var total = new Object()
          total.zip = '【综合评估】'
          total.index = '-'
          for (var i = 0; i < this.allList.length; i++) {
            if (this.allList[i].RESULT === undefined || this.allList[i].RESULT == null) {
              total['chooseName' + i] = ''
            } else {
              total['chooseName' + i] = this.allList[i].RESULT
            }
            if (this.allList[i].ALL_POINTS !== null) {
              total['points' + i] = this.allList[i].ALL_POINTS + '分'
            } else {
              total['points' + i] = this.allList[i].ALL_POINTS
            }
          }
          console.log('结果--------------' + JSON.stringify(total))
          fzdatas.push(total)
          // eslint-disable-next-line no-redeclare
          for (var i = 0; i < zplist.length; i++) {
            // eslint-disable-next-line no-new-object
            var fzdata = new Object()
            fzdata.zip = zplist[i].SUBJECT_NAME
            fzdata.index = i + 1
            fzdata['chooseName' + 0] = zplist[i].CHOOSE_NAME
            if (zplist[i].POINTS !== null) {
              fzdata['points' + 0] = zplist[i].POINTS + '分'
            } else {
              fzdata['points' + 0] = zplist[i].POINTS
            }
            fzdatas.push(fzdata)
          }

          // eslint-disable-next-line no-redeclare
          for (var i = 1; i < this.allList.length; i++) {
            var fplist = this.allList[i].chooses
            var ott = {
              name: '复评结果' + i,
              prop: 'chooseName' + i,
              width: 100,
              fixed: false
            }
            console.log(ott)
            var obj = {
              name: '复评得分' + i,
              prop: 'points' + i,
              width: 80,
              fixed: false
            }
            for (var j = 0; j < fplist.length; j++) {
              fzdatas[j + 1]['chooseName' + i] = fplist[j].CHOOSE_NAME
              if (fplist[j].POINTS !== null) {
                fzdatas[j + 1]['points' + i] = fplist[j].POINTS + '分'
              } else {
                fzdatas[j + 1]['points' + i] = fplist[j].POINTS
              }
              fzdatas[j + 1]['index'] = j + 1
            }
            this.tabTitle.push(ott)
            this.tabTitle.push(obj)
          }
          this.tableData = fzdatas
          console.log(this.tableData)
          console.log(this.tabTitle)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  /*//css样式*/
  /deep/ tbody tr:nth-child(1) {
    background-color: #F5F7FA !important;
    color: #1da4f2;
  }
  /deep/ .van-uploader__upload{
    display: none;
  }
  /**{*/
  /*  margin: 0;*/
  /*  padding: 0;*/
  /*}*/
  .all{
    background: #FAF9FE;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .header{
    height: 12vw;
    font-family: PingFang SC;
    color: #333;
  }
  .header span{
    /*font-size: 16px;*/
  }
  .fanhui{
    display: flex;
    align-items: center;
    color: #1da4f2;
  }
  .fanhui  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .sides{
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-image__img{
    width: 11vw;
  }
  .header .backImg{
    width: 11vw;
  }
  .title{
    width: 92vw;
    height: 44px;
    margin: 5px auto;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
  }
  .title li{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }
  .btnList{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
  }
  .btnList button{
    width: 60px;
    height: 29px;
    border-radius: 14px;
    border: none;
    font-size: 15px;
    background: #FFFFFF;
  }
  .select{
    background: rgba(29, 164, 242, 0.1) !important;
    color: #1da4f2 !important;
  }
  .TabAll{
    background: #FFFFFF;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .bottom{
    width: 100%;
    background: #FFFFFF;
    padding: 5px 0;
    box-sizing: border-box;
    position: sticky;
    bottom: 0;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px -2px 30px 0px rgba(0, 0, 0, 0.05);
  }
  .listUl {
    width: 92vw;
    height: 75px;
    margin: 5px auto auto auto;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid rgba(29, 164, 242, 0.1);
    color: #1da4f2;
  }
  .li_left{
    width: 25%;
    height: 100%;
    font-size: 15px;
    background: rgba(29, 164, 242, 0.1);
    justify-content: center;
  }
  .zongfen{
    height: 44px !important;
  }
  .li_right{
    width: 75%;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 13px;
    color: #333333;
  }
  .listUl li {
    display: flex;
    align-items: center;
  }
  .listUl li a {
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .listUl .liTop {
    display: flex;
    font-size: 4vw;
    font-family: PingFang SC;
    /*margin-bottom: 6vw;*/
    padding: 5vw 0;
  }
  .listUl .liBottom{
    display: flex;
    justify-content: space-between;
    padding-bottom: 3vw;
  }
  /deep/ .van-collapse-item__content{
    padding: 0px 0px;
  }
  /deep/ .van-nav-bar__title{
    font-size: 15px;
    font-weight: bold;
    font-family: PingFang SC;
  }
  /deep/ .van-nav-bar{
    height: 12vw;
  }
  /deep/ .el-table td, .el-table th.is-leaf,
  /deep/ .el-table th>.cell{
    text-align: center;
  }
  /deep/ body .el-table th.gutter{
    display: table-cell!important;
  }
</style>
